{{ $cover := and
    (.HasShortcode "blocks/cover")
    (not .Site.Params.ui.navbar_translucent_over_cover_disable)
-}}

<nav class="js-navbar-scroll navbar navbar-expand navbar-dark
            {{- if $cover }} td-navbar-cover {{- end }} flex-md-column flex-xl-row td-navbar" data-auto-burger="primary">
  <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
    {{- /**/ -}}
    <span class="navbar-brand__logo navbar-logo">
      {{- if ne .Site.Params.ui.navbar_logo false -}}
        {{ with resources.Get "icons/logo.svg" -}}
          {{ ( . | minify).Content | safeHTML -}}
        {{ end -}}
      {{ end -}}
    </span>
    {{- /**/ -}}
    <span class="navbar-brand__name">
      {{- .Site.Title -}}
    </span>
    {{- /**/ -}}
  </a>
  <div class="td-navbar-nav-scroll d-none d-md-block ml-xl-auto" id="main_navbar">
    {{- /* In Docsy, the mt-2 class is used but that causes issues. This should be re-visited after 0.7 migration */ -}}
    <ul class="navbar-nav mt-lg-0">
      {{ $p := . -}}
      {{/* The below code needs to be aligned to Docsy to use the menu data from the front matter wherever possible */}}
      {{ $sections := slice "docs" "blog" "training" "careers" "partners" "community" }}
      {{ range $sections }}
      {{ with site.GetPage "section" . }}
      <li class="nav-item mr-4 mb-2 mb-lg-0">
        {{ $active := eq .Section $.Section }}
        <a class="nav-link{{if $active }} active{{end}}" href="{{ .RelPermalink }}" >{{ .Title }}</a>
      </li>
      {{ end -}}
      {{ end -}}
      {{ if .Site.Params.versions -}}
      <li class="nav-item dropdown mr-4 d-none d-lg-block">
        {{ partial "navbar-version-selector.html" . -}}
      </li>
      {{ end -}}
      {{ if (gt (len .Site.Home.Translations) 0) -}}
      <li class="nav-item dropdown mr-xl-4 d-none d-lg-block">
        {{ partial "navbar-lang-selector.html" . -}}
      </li>
      {{ end -}}
    </ul>
  </div>
  {{- /*
    The search bar is hidden for screen sizes 1500px or lower using CSS.
    We should look into using less hardcoded way of doing it.
  */ -}}
  <div class="navbar-nav d-none k8s-1500-block">
    {{ partial "search-input.html" . }}
  </div>
  {{- /*
    The menu overlay is added to the DOM and shown/hidden all by JS.
    We should explore a Hugo way of doing this.
  */ -}}
  <button id="hamburger" class="btn fas fa-bars" onclick="kub.toggleMenu()" data-auto-burger-exclude></button>
</nav>